<template>
  <el-dialog title="新建话术" :visible.sync="visible" width="80%">
    <el-form
      label-width="120px"
      size="mini"
      :model="form"
      :rules="rules"
      ref="form"
    >
      <el-row>
        <el-col :span="8">
          <el-form-item label="话术类型" :rules="[{required:true,message:'请选择类型',triggle: 'blur'}]">
            <el-select
              v-model="form.type"
              placeholder="请选择"
              size="mini"
            >
              <el-option
                v-for="item in typeOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="8">
          <el-form-item label="话术标题:" prop="verbalTitle" :rules="[{required:true,message:'请输入话术标题',triggle: 'blur'}]">
            <el-input size="mini" v-model="form.verbalTitle"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-row>
        <el-col :span="22">
          <el-form-item label="话术内容:" prop="verbalContent" :rules="[{required:true,message:'请输入话术内容',triggle: 'blur'}]">
            <quill-editor
              v-model="form.verbalContent"
              ref="myQuillEditor"
              :options="editorOption"
              style="display: flex; flex-flow: column; min-height: 200px"
            >
              <!-- 自定义toolar -->
              <div class="toolbar" slot="toolbar">
                <!-- Add a bold button -->
                <button class="ql-bold" title="加粗">Bold</button>
                <button class="ql-italic" title="斜体">Italic</button>
                <button class="ql-underline" title="下划线">underline</button>
                <button class="ql-strike" title="删除线">strike</button>
                <button class="ql-blockquote" title="引用"></button>
                <button class="ql-code-block" title="代码"></button>
                <button class="ql-header" value="1" title="标题1"></button>
                <button class="ql-header" value="2" title="标题2"></button>
                <!--Add list -->
                <button
                  class="ql-list"
                  value="ordered"
                  title="有序列表"
                ></button>
                <button
                  class="ql-list"
                  value="bullet"
                  title="无序列表"
                ></button>
                <!-- Add font size dropdown -->
                <select class="ql-header" title="段落格式">
                  <option selected>段落</option>
                  <option value="1">标题1</option>
                  <option value="2">标题2</option>
                  <option value="3">标题3</option>
                  <option value="4">标题4</option>
                  <option value="5">标题5</option>
                  <option value="6">标题6</option>
                </select>
                <select class="ql-size" title="字体大小">
                  <option value="10px">10px</option>
                  <option value="12px">12px</option>
                  <option value="14px">14px</option>
                  <option value="16px" selected>16px</option>
                  <option value="18px">18px</option>
                  <option value="20px">20px</option>
                </select>
                <select class="ql-font" title="字体">
                  <option value="SimSun">宋体</option>
                  <option value="SimHei">黑体</option>
                  <option value="Microsoft-YaHei">微软雅黑</option>
                  <option value="KaiTi">楷体</option>
                  <option value="FangSong">仿宋</option>
                  <option value="Arial">Arial</option>
                </select>
                <!-- Add subscript and superscript buttons -->
                <select
                  class="ql-color"
                  value="color"
                  title="字体颜色"
                ></select>
                <select
                  class="ql-background"
                  value="background"
                  title="背景颜色"
                ></select>
                <select class="ql-align" value="align" title="对齐"></select>
                <button class="ql-clean" title="还原"></button>
                <!-- You can also add your own -->
              </div>
            </quill-editor>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div
      style="display: flex; justify-content: flex-end; margin: 10px 82px 0 0"
    >
      <el-button
        class="reset-btn"
        type="primary"
        size="mini"
        @click="visible = false"
        >取消</el-button
      >
      <el-button type="primary" size="mini" @click="save('form')"
        >保存</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { Quill, quillEditor } from "vue-quill-editor";
import "quill/dist/quill.core.css";
import "quill/dist/quill.snow.css";
import "quill/dist/quill.bubble.css";
// 自定义字体大小
let Size = Quill.import("attributors/style/size");
Size.whitelist = ["10px", "12px", "14px", "16px", "18px", "20px"];
Quill.register(Size, true);
// 自定义字体类型
var fonts = [
  "SimSun",
  "SimHei",
  "Microsoft-YaHei",
  "KaiTi",
  "FangSong",
  "Arial",
  "Times-New-Roman",
  "sans-serif",
  "宋体",
  "黑体",
];
var Font = Quill.import("formats/font");
Font.whitelist = fonts;
Quill.register(Font, true);
export default {
  props: {
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    width: {
      type: String,
      default: "80%",
    },
  },
  components: {
    quillEditor,
  },
  data() {
    return {
      typeOptions: [
        {
          label: "首次回访",
          value: "1",
        },
        {
          label: "逾期催收",
          value: "0",
        },
      ],
      form: {
        type: "1",
        verbalTitle: "",
        verbalContent: "",
      },
      rules: {},
      tabPosition: "left",
      editorOption: {
        placeholder: "请输入话术提醒内容:",
        theme: "snow", // or 'bubble'
        modules: {
          toolbar: {
            container: ".toolbar",
          },
        },
      },
      options2: [],
    };
  },
  computed: {
    visible: {
      get() {
        return this.dialogVisible;
      },
      set(val) {
        this.$emit("update:dialogVisible", val);
      },
    },
  },
  methods: {
    save(name) {
      this.$refs[name].validate((flag) => {
        if (flag) {
          this.$axios({
            method: "post",
            url: "/IAM/MC/verbal/add",
            params: this.form
          }).then((res) => {
            if (res.code == 200) {
              this.$message.success("新增成功");
              this.$emit("update");
            }
            this.visible = false;
          });
        }
      });
    },
  },
};
</script>

<style>
</style>
